<template>
  <div class="wrap" v-loading="loading">
    <div class="content">
      <div class="season">
        <h3>{{$t('stock.commodity information')}}：</h3>
        <el-card>
          <div class="goods-content">
            <div class="left">
              <div class="img-box">
                <img :src="data.goodsImage" alt="">
              </div>
            </div>
            <div class="right">
              <div
                class="goods-card"
                v-for="goods in goodsList"
                :key="goods.id"
                :class="{
                  'goods-disable-card': goods.disableStock
                }"
              >
                <template v-if="data.is_packet === 0">
                  <p class="font-bold">{{goods.userAccount}}（{{goods.showName}}）</p>
                  <p class="font-bold"><span v-if="$store.getters.platformNum > 1">{{goods.accountType}}, </span>{{goods.goodsId}} <full-span :row="goods"></full-span> </p>
                </template>

                <el-tooltip class="item" effect="dark" :content="goods.title" placement="top-start">
                  <p class="hidden-1 font-grey goods-title">{{goods.title}}</p>
                </el-tooltip>
                <p class="font-bold">SKU：{{goods.sku || '-'}}</p>
                <p class="font-grey goods-attr hidden-1">
                  <span
                    v-for="attr in goods.attributes"
                    :key="attr.name"
                    class="attr"
                  >
                    {{attr.name}} : {{attr.value}}
                    <span class="attr-link"> | </span>
                  </span>
                </p>
                <template v-if="data.is_packet === 0">
                  <div class="operate">
                    <el-tooltip class="item" effect="dark" :content="$t('stock.Add applicable SKUs')" placement="top">
                      <img src="@/assets/images/stock-add.png" alt="" @click="addStock">
                    </el-tooltip>
                    <template v-if="goodsList.length > 1">
                      <el-tooltip class="item" effect="dark" :content="$t('stock.Delete applicable SKUs')" placement="top">
                        <img src="@/assets/images/stock-del.png" alt="" @click="delStock(goods)">
                      </el-tooltip>
                    </template>
                  </div>
                </template>

                <div class="catalogo-tag" v-if="goods.catalogListing">
                  CATÁLOGO
                </div>
              </div>


            </div>
          </div>
        </el-card>
      </div>
      <div class="season">
        <h3>前台库存信息：</h3>
        <el-card>

          <div class="stock-box mgt20">

            <div class="stock-card" v-if="mekGoodsList.length">
              <div class="label font-bold mgb10" style="padding-top: 8px;">
               {{$t('table.平台前台库存', {platform: getMercadoName()})}}：
              </div>
              <div class="goods-num">
                <div
                  class="goods-item"
                  v-for="goods in mekGoodsList"
                  :key="goods.id"
                >
                  <div class="goods-text">
                    {{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}} -
                    <div :class="{'font-red': goods.disableStock}" class="goods-status">{{goods.status}}
                      <span v-if="goods.catalogListing">,Catalogo</span>
                      <full-span :row="goods"></full-span>
                    </div>
                  </div>
                  <el-input-number
                    class="mgl10"
                    v-model="goods.inventory" :placeholder="$t('common.pleaseFillIn')" :min="0" :precision="0"
                    :disabled="goods.disableStock"
                  ></el-input-number>
                </div>
              </div>
            </div>


            <div class="stock-card" v-if="faGoodsList.length">
              <div class="label font-bold mgb10" style="padding-top: 8px;">
                <span class="fa-text-color">{{getFalabellaName()}}</span> {{$t('table.Front desk inventory')}}：
              </div>
              <div class="goods-num">
                <div
                  class="goods-item"
                  v-for="goods in faGoodsList"
                  :key="goods.id"
                >
                  <div class="goods-text">{{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}} - <div :class="{'font-red': goods.disableStock}" class="goods-status">{{goods.status}}</div></div>
                  <el-input-number
                    class="mgl10"
                    v-model="goods.inventory" :placeholder="$t('common.pleaseFillIn')" :min="0" :precision="0"
                    :disabled="goods.disableStock"
                  ></el-input-number>
                </div>
              </div>
            </div>

            <div class="stock-card" v-if="spGoodsList.length">
              <div class="label" style="padding-top: 8px;">
                <span class="sp-text-color">{{getShopeeName()}}</span> {{$t('table.Front desk inventory')}}：
              </div>
              <div class="goods-num">
                <div
                  class="goods-item"
                  v-for="goods in spGoodsList"
                  :key="goods.id"
                >
                  <div class="goods-text">{{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}} - <div :class="{'font-red': goods.disableStock}" class="goods-status">{{goods.status}}</div></div>
                  <el-input-number
                    class="mgl10"
                    v-model="goods.inventory" :placeholder="$t('common.pleaseFillIn')" :min="0" :precision="0"
                    :disabled="goods.disableStock"
                  ></el-input-number>
                </div>
              </div>
            </div>

            <div class="stock-card" v-if="siGoodsList.length">
              <div class="label" style="padding-top: 8px;">
                <span class="sp-text-color">{{getSheinName()}}</span> {{$t('table.Front desk inventory')}}：
              </div>
              <div class="goods-num">
                <div
                  class="goods-item"
                  v-for="goods in siGoodsList"
                  :key="goods.id"
                >
                  <div class="goods-text">{{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}} - <div :class="{'font-red': goods.disableStock}" class="goods-status">{{goods.status}}</div></div>
                  <el-input-number
                    class="mgl10"
                    v-model="goods.inventory" :placeholder="$t('common.pleaseFillIn')" :min="0" :precision="0"
                    :disabled="goods.disableStock"
                  ></el-input-number>
                </div>
              </div>
            </div>

          </div>
          <el-button type="primary" @click="stockDialog = true" :disabled="stockNumDisable()">修改前台库存</el-button>
        </el-card>
        <div class="tips mgt10">
          <div>{{$t('table.Front desk inventory')}}：{{$t('stock.stockText5')}}</div>
        </div>
      </div>
      <div class="season">
        <h3>库存信息:</h3>
        <stock-card :suit-id="suitId"></stock-card>
      </div>
    </div>


    <el-dialog
      :title="$t('stock.sureDeleteSku')"
      :visible.sync="delDialog"
      width="500px"
    >
      <div>
        <div class="mgb10"><span v-if="$store.getters.platformNum > 1">{{delRow.accountType}}, </span>{{delRow.showName}}</div>
        <div class="dialog-goods">
          <div class="goods-img">
            <img :src="delRow.image" alt="">
          </div>
          <div class="goods-title">
            <el-tooltip class="item" effect="dark" :content="delRow.title" placement="top-start">
              <p class="hidden-1">{{delRow.title}}</p>
            </el-tooltip>
            <p>{{ delRow.goodsId }} {{delRow.sku ? `(${delRow.sku})` : ''}}</p>
          </div>
        </div>
        <div class="tips mgt10 font-red" style="color: #FF0000;">
          {{$t('stock.sureDeleteText')}}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialog = false">{{$t('common.cancel')}}</el-button>
        <el-button type="primary" @click="delStockGoods">{{$t('common.confirm')}}</el-button>
      </span>
    </el-dialog>

    <el-dialog
      class="select-goods-dialog"
      :title="$t('stock.Add other applicable Listing IDs and SKUs')"
      :visible.sync="addDialog"
    >
      <div >
        <div class="select-goods">
          {{$t('stock.The currently selected product')}}
          <el-table
            ref="selectGoods"
            :data="selectGoods"
            :border="true"
            row-key="id"
            class="goods-table"
          >
            <el-table-column
              prop="image"
              :label="$t('table.productCover')"
              align="left"
              width="120"
            >
              <template slot-scope="{row}">
                <div>
                  <img :src="row.image" alt="" width="70" style="margin-left: 20px">
                  <div class="catalogo-tag" v-if="row.catalogListing">
                    CATÁLOGO
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="title"
              :label="$t('table.title')"
              align="left"
              min-width="250"
            >
              <template slot-scope="{row}">
                <el-tooltip class="item" effect="dark" :content="row.title" placement="top">
                  <div class="hidden-2">
                    {{row.title}}
                  </div>
                </el-tooltip>
                <!-- 如果是变体则直接显示对应的属性 -->
                <template v-if="row.attributes">
                  <div class="goods-SKU-info">
                <span
                  v-for="attr in row.attributes"
                  :key="attr.name"
                  class="attr"
                >
                  {{attr.name}} : {{attr.value}}
                  <span class="attr-link"> | </span>
                </span>
                  </div>
                </template>

              </template>
            </el-table-column>
            <el-table-column
              prop="accountType"
              :label="$t('table.store')"
              align="center"
              width="150"
              v-if="$store.getters.platformNum > 1"
            >
              <template slot-scope="{row}">
                {{getPlatformShortNameByAccountNum(row.accountTypeNum)}}(<span>{{row.showName}}</span>)
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.ListingIDAndSKU')"
              align="center"
              min-width="150"
            >
              <template slot-scope="{row}">
                <div>{{row.goodsId}} {{row.sku ? `(${row.sku})` : ''}}</div>
              </template>
            </el-table-column>
            <m-l-code-column></m-l-code-column>
            <el-table-column
              :label="$t('table.Listing Status')"
              align="center"
              min-width="150"
            >
              <template slot-scope="{row}">
                {{row.status}}<span v-if="row.catalogListing">，Catalog</span>
                <full-span :row="row"></full-span>
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('table.operate')"
              align="center"
              min-width="100"
            >
              <template slot-scope="{row}">
                <diy-link @click="removeSelect(row)" v-if="selectGoods.length > 1">{{$t('stock.remove')}}</diy-link>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <p>{{$t('stock.stockText3')}}</p>

        <div style="margin: 10px 0;">
          <el-input size="small" style="width: 300px"  :placeholder="$t('common.searchForCompleteListingIDorSKU')" v-model="searchGoodsParams.keyword"></el-input>
          <el-button size="small" type="primary" @click="searchGoods">{{ $t('common.search') }}</el-button>
        </div>
        <el-table
          ref="goodsTable"
          v-loading="searchLoading"
          :data="searchGoodsList"
          :border="true"
          row-key="id"
          class="goods-table"
          default-expand-all
        >
          <el-table-column
            prop="image"
            :label="$t('table.productCover')"
            align="left"
            width="120"
          >
            <template slot-scope="{row}">
              <div>
                <img :src="row.image" alt="" width="70" style="margin-left: 20px">
                <div class="catalogo-tag" v-if="row.catalogListing">
                  CATÁLOGO
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            :label="$t('table.title')"
            align="left"
            min-width="250"
          >
            <template slot-scope="{row}">
              <el-tooltip class="item" effect="dark" :content="row.title" placement="top">
                <div class="hidden-2">
                  {{row.title}}
                </div>
              </el-tooltip>
              <div class="goods-SKU-info">
                  <span
                    v-for="attr in row.attributes"
                    :key="attr.name"
                    class="attr"
                  >
                    {{attr.name}} : {{attr.value}}
                    <span class="attr-link"> | </span>
                  </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="accountType"
            :label="$t('table.store')"
            align="center"
            width="150"
            v-if="$store.getters.platformNum > 1"
          >
            <template slot-scope="{row}">
              {{getPlatformShortNameByAccountNum(row.accountTypeNum)}}(<span>{{row.showName}}</span>)
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('table.ListingIDAndSKU')"
            align="center"
            min-width="150"
          >
            <template slot-scope="{row}">
              <div>{{row.goodsId}} {{row.sku ? `(${row.sku})` : ''}}</div>
            </template>
          </el-table-column>
          <m-l-code-column></m-l-code-column>
          <el-table-column
            :label="$t('table.Listing Status')"
            align="center"
            min-width="150"
          >
            <template slot-scope="{row}">
              {{row.status}}<span v-if="row.catalogListing">，Catalog</span>
              <full-span :row="row"></full-span>
            </template>
          </el-table-column>

          <el-table-column
            :label="$t('table.operate')"
            align="center"
            min-width="100"
          >
            <template slot-scope="{row}">
              <el-link :underline="false" @click="addSelectGoods(row)" :disabled="disAbleAdd(row)">{{ $t('common.add') }}</el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
          <el-button @click="addDialog = false">{{ $t('common.cancel') }}</el-button>
          <el-button @click="saveStockGoods" type="primary">{{ $t('common.confirm') }}</el-button>
        </div>

      </div>
    </el-dialog>

    <el-dialog
      :title="$t('stock.sureEditStock')"
      :visible.sync="stockDialog"
      width="500px"
    >
      <div style="margin-bottom: 20px;">{{ $t('stock.editStockText1') }}：</div>

      <div v-if="mekGoodsList.length > 0" class="mgt20">
        <span>{{getMercadoName()}} {{$t('table.Front desk inventory')}}：</span>
        <div
          v-for="goods in mekGoodsList"
          :key="goods.id"
          class="mgb10 mgt10"
        >
          <span class="mgr10">{{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}}</span>
          <span class="font-red">{{goods.inventory}}</span>
        </div>
      </div>


      <div v-if="faGoodsList.length > 0" class="mgt20">
        <span>{{getFalabellaName()}} {{$t('table.Front desk inventory')}}：</span>
        <div
          v-for="goods in faGoodsList"
          :key="goods.id"
          class="mgb10 mgt10"
        >
          <span class="mgr10">{{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}}:</span>
          <span class="font-red">{{goods.inventory}}</span>
        </div>
      </div>

      <div v-if="spGoodsList.length > 0" class="mgt20">
        <span>{{getShopeeName()}} {{$t('table.Front desk inventory')}}：</span>
        <div
          v-for="goods in spGoodsList"
          :key="goods.id"
          class="mgb10 mgt10"
        >
          <span class="mgr10">{{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}}:</span>
          <span class="font-red">{{goods.inventory}}</span>
        </div>
      </div>

      <div v-if="siGoodsList.length > 0" class="mgt20">
        <span>{{getSheinName()}} {{$t('table.Front desk inventory')}}：</span>
        <div
          v-for="goods in siGoodsList"
          :key="goods.id"
          class="mgb10 mgt10"
        >
          <span class="mgr10">{{goods.goodsId}} {{goods.sku ? `(${goods.sku})` : ''}}:</span>
          <span class="font-red">{{goods.inventory}}</span>
        </div>
      </div>

      <div class="font-red mgt20">
        {{$t('stock.editStockText2')}}
      </div>
      <div class="footer mgt20">
        <el-button @click="stockDialog = false">{{$t('common.cancel')}}</el-button>
        <el-button @click="editStockNum" type="primary" :loading="btnLoading">{{$t('common.confirm')}}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  delStockGoods,
  editBoxLabelGoodsNum,
  editStockNum,
  getStockInfo,
  getStockOrder,
  saveStockGoods
} from "@/api/stock";
import {
  deepCopy,
  getFalabellaName,
  getMercadoName,
  getPlatformShortNameByAccountNum,
  getSheinName,
  getShopeeName
} from "@/utils";
import {getGoodsList, getSuitGoodsList} from "@/api/goods";
import {getWareHouseName} from "@/utils/common";
import PrintSkuInfo from "@/views/stock/components/PrintSkuInfo.vue";
import FullSpan from "@/views/stock/components/FullSpan.vue";
import MLCodeColumn from "@/views/stock/components/MLCodeColumn.vue";
import request from "@/utils/request";
import {getBoxTypeStr} from "@/utils/boxLabel";
import EditStockNumMixin from "@/views/stock/components/EditStockNumMixin.vue";
import EditStockNumBox from "@/views/stock/components/EditStockNumBox";
import BoxLabelTable from "@/views/stock/components/BoxLabelTable.vue";
import StockCard from "@/views/stock/components/StockCard.vue";

const allAccountType = {
  MercadoLibre: 'MercadoLibre',
  Falabella: 'Falabella',
  Shopee: 'Shopee',
  Shein: 'Shein',
}

export default {
  name: "editStock",
  components: {
    StockCard,
    MLCodeColumn,
    FullSpan,
  },
  computed: {
    // 正常的商品
    goodsList(){
      return this.allGoodsList.filter(item => item.isGoods)
    },
    // 美刻多的商品
    mekGoodsList(){
      return this.allGoodsList.filter(item => item.accountType === allAccountType.MercadoLibre)
    },
    // falabella的商品
    faGoodsList(){
      return this.allGoodsList.filter(item => item.accountType === allAccountType.Falabella)
    },
    // 虾皮的商品
    spGoodsList(){
      return this.allGoodsList.filter(item => item.accountType === allAccountType.Shopee)
    },
    // 希音的商品
    siGoodsList(){
      return this.allGoodsList.filter(item => item.accountType === allAccountType.Shein)
    },
    // 一件代发的商品
    oneGoodsList(){
      return this.allGoodsList.filter(item => {
        if(item.isSystem){
          return true
        }
        if(item.isGoods && item.inventoryId){
          return !item.catalogListing;
        }
        return false;
      })
    },
    // 中转送仓库存
    middleGoodsList(){
      return this.allGoodsList.filter(item => {
        if(item.isTB){
          return true
        }
        if(item.isGoods && item.inventoryId){
          return true
        }
        return false
      })
    },
    // 待送仓库存商品列表
    fullGoodsList(){
      return this.allGoodsList.filter(item=>{
        return item.isGoods && item.inventoryId
      })
    },
    editBoxTable(){
      return this.boxTable.filter(item=> item.stockNum !== item.editStockNum)
    },
    showEditStockBtn(){
      const arr = ['stock', 'middleStock'];
      return arr.includes(this.boxQueryParam.boxType)
    },
    canEditBoxStock(){
      return this.editBoxTable.length !== 0;
    },
    boxTypeList(){
      const arr1 = [
        {label: 'stock', text: '代发库存（已上架）'},
        {label: 'middleStock', text: '暂存库存（已上架）'},
        {label: 'fullStock', text: '快出库存'},
      ];
      const arr2 = [
        {label: 'stock', text: '代发库存（已上架）'},
        {label: 'stockWait', text: '代发库存（待上架）'},
        {label: 'middleStock', text: '暂存库存（已上架）'},
        {label: 'middleStockWait', text: '暂存库存（待上架）'},
        {label: 'fullStock', text: '快出库存'},
        {label: 'onWayStock', text: '在途库存'},
      ];
      return this.boxQueryParam.stockType === 'mixin' ? arr1 : arr2
    }
  },
  watch: {

  },
  data(){

    return {
      loading: false,
      data: {},
      goodsImg: '',
      delDialog: false,
      addDialog: false,
      suitId: '',
      allGoodsList: [],
      selectGoods: [],
      delRow: {

      },
      btnLoading: false,
      searchGoodsParams: {
        page: 1,
        pageSize: 100,
        searchApi: 1,
        keyword: '',
        userId: '',
        isWarehouse: '',
        accountType: '',
      },
      searchGoodsList: [],
      searchLoading: false,
      stockNumForm: {
        suitId: '',
        stockNum: '',
        goodsList: [],
        mekGoodsList: [],
        faGoodsList: [],
        spGoodsList: [],
      },
      stockDialog: false,
      boxQueryParam: {
        stockType: 'mixin',
        boxType: 'stock',
        page: 1,
        pageSize: 10,
      },
      boxTable: [],
      boxTotal: 0,
      stockBoxDialog: false,
    }
  },
  created() {
    this.suitId = this.$route.query.id
    this.getData()
  },
  methods:{
    getBoxTypeStr,
    getSheinName,
    getShopeeName,
    getPlatformShortNameByAccountNum,
    getFalabellaName,
    getMercadoName,
    getWareHouseName,
    getData(){
      this.loading = true
      getStockInfo(this.suitId)
        .then(res=>{
          this.loading = false
          this.data = res.data
          this.searchGoodsParams.userId = this.data.userId
          res.data.goodsList.forEach(item => {
            // 记录原来的库存 用于判断数据有没有变化
            item.originInventory = item.inventory;
            item.originStockNum = item.stockNum;
            item.originMiddleStockNum = item.middleStockNum;
            item.originFullStockNum = item.fullStockNum;

            item.stockNumList.forEach( stockItem => {
              stockItem.originNum = stockItem.num
            })
            item.middleStockNumList.forEach( stockItem => {
              stockItem.originNum = stockItem.num
            })
          })
          this.allGoodsList = deepCopy(res.data.goodsList)

          this.selectGoods = deepCopy(this.goodsList)

          this.stockNumForm.stockNum = this.data.num
          this.stockNumForm.suitId = this.data.id
          this.stockNumForm.goodsList = []

        })
    },

    changeBoxTable(){
      this.boxQueryParam.page = 1;
      this.boxQueryParam.boxType = 'stock'
    },
    // 返回上一页
    goBack(){
      this.$router.go(-1);
    },
    addStock(){
      this.addDialog = true
      this.selectGoods = deepCopy(this.goodsList)
    },
    delStock(goods){
      this.delDialog = true;
      this.delRow = goods;
    },
    // 删除关联
    delStockGoods(){
      this.btnLoading = true
      delStockGoods(this.delRow.suitListId)
        .then(res=>{
          this.btnLoading = false
          this.delDialog = false
          this.$successMessage(res.message)
          this.getData()
        })
    },
    // 搜索商品
    searchGoods(){
      this.searchLoading = true
      this.searchGoodsParams.isWarehouse = this.data.isWarehouse
      this.searchGoodsParams.accountType = this.data.accountType
      getSuitGoodsList(this.searchGoodsParams)
        .then(res=>{
          this.searchLoading = false
          this.searchGoodsList = res.data
        })
    },
    showStockDialog(){
      this.stockExpressForm.suitId = this.data.id;
      this.stockExpressForm.express = deepCopy(this.data.express);

      this.stockExpressDialog = true
    },
    // 移除选择的商品
    removeSelect(row){
      this.selectGoods = this.selectGoods.filter(item => item.id !== row.id)
    },
    // 已选择过的 不能再选择
    disAbleAdd(row){
      if(row.suitId > 0 && row.suitId === this.data.suitId){
        return true;
      }

      let flag = this.selectGoods.find(item=>{
        if(item.id === row.id){
          return true;
        }
      })
      return !!flag;
    },
    addSelectGoods(row){
      // 添加商品
      this.selectGoods.push(row)
    },
    saveStockGoods(){
      const postData = {
        suitId: this.data.id,
        userId: this.data.userId,
        goodsData: [],
      }
      this.selectGoods.forEach(item=>{
        postData.goodsData.push({
          goodsId: item.goodsId,
          variationId: item.variationId || '',
          accountId: item.accountId,
          accountType: item.accountType
        })
      })
      this.btnLoading = true
      saveStockGoods(postData)
        .then(res=>{
          this.btnLoading = false
          this.addDialog = false
          this.getData()
          this.$successMessage(res.message)
        })
    },
    stockNumDisable(){
      return !this.allGoodsList.some(item => {
        let flag1 = item.stockNumList.some(stockItem => stockItem.originNum !== stockItem.num)
        let flag2 = item.middleStockNumList.some(stockItem => stockItem.originNum !== stockItem.num)
        if(item.inventory !== item.originInventory || flag1 || flag2){
          return true
        }
        return false
      })
    },
    // 修改库存
    editStockNum(){
      const postData = {
        suitId: this.stockNumForm.suitId,
        stockNum: this.stockNumForm.stockNum,
        goodsList: [], // 正常的商品 要通过api修改平台库存
        oneStockList: [], // 一件代发的商品
        middleStockList: [], // 中转送仓的商品
      }

      this.allGoodsList.forEach(item=> {

        if(item.inventory === undefined){
          item.inventory = 0
        }
        if(item.stockNum === undefined){
          item.stockNum = 0
        }
        if(item.middleStockNum === undefined){
          item.middleStockNum = 0
        }
        item.stockNumList.forEach(stockItem => {
          if(stockItem.num === undefined){
            stockItem.num = 0;
          }
        })
        item.middleStockNumList.forEach(stockItem => {
          if(stockItem.num === undefined){
            stockItem.num = 0;
          }
        })
        // 如果是商品 并且商品前后有修改过库存
        if(item.isGoods && !item.disableStock){
          if(item.inventory !== item.originInventory){
            postData.goodsList.push(item)
          }
        }

      })

      this.btnLoading = true
      editStockNum(postData)
        .then(res=>{
          this.btnLoading = false
          if(res.error === 0){
            this.getData()
            this.stockDialog = false;
            this.$successMessage(res.message)
          }else{
            this.$errorMessage(res.message)
          }
        })
    },
    changeBoxStockNum(row){
      if(row.editStockNum === undefined){
        row.editStockNum = 0
      }
    },
    // 刷新页面
    refresh(){
      this.$router.go(0)
    }
  }
}
</script>
<style lang="scss">
.goods-table{
  .el-table__expand-icon {
    float: left;
    line-height: 100px;
    height: 100px;
    font-size: 14px;
    position: absolute;
    top: 30px;
    left: 5px;
  }
}
</style>
<style scoped lang="scss">
.wrap {
  padding: 10px 30px;
  .header{
    display: flex;
    justify-content: space-between;
  }
  .content{
    padding: 20px 0 0;
  }
  .header-card{
    font-size: 14px;
    background-color: rgba(242, 242, 242, 1);
    p{
      margin: 10px 0;
      padding: 0;
    }
    .font-bold{
      font-weight: bold;
    }
    .true-number{
      color: #FF0000;
      font-weight: 600;
    }
  }
}

.goods-content{
  display: flex;
  .left{
    margin-right: 20px;
    .img-box{
      width: 100px;
      height: 100px;
      border-radius: 5px;
      background-color: #cccccc;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      img{
        width: 90px;
        height: 90px;
      }
    }
  }
  .right{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    .goods-card{
      position: relative;
      width: 350px;
      height: 100px;
      margin-right: 20px;
      margin-bottom: 20px;
      border: 1px solid #cccccc;
      font-size: 14px;
      padding: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      p{
        margin: 0;
        padding: 0;
      }

      .font-bold{
        font-weight: 600;
        color: #555555;
      }
      .goods-title{
        font-weight: 500;

      }
      .operate{
        display: none;
        position: absolute;
        right: 5px;
        top: 5px;
        img{
          cursor: pointer;
          width: 16px;
          margin: 0 5px;
        }
      }
      .catalogo-tag{
        background-color: #5c5c5c;
        color: #ffffff;
        width: auto;
        position: absolute;
        padding: 5px 8px;
        right: 0;
        top: 0;
        font-size: 12px;
        font-weight: bold;
      }

    }
    .goods-card:hover{
      .operate{
        display: block;
      }
      .catalogo-tag{
        display: none;
      }
    }
    .goods-disable-card{
      background-color: #F3F6F9;
    }
  }
}
.dialog-goods{
  display: flex;
  .goods-img{
    width: 50px;
    height: 50px;
    margin-right: 20px;
    border: 1px solid #cccccc;
    img{
      width: 48px;
      height: 48px;
    }
  }
  .goods-title{
    line-height: 25px;
    p{
      margin: 0;
      padding: 0;
    }
  }
}
.stock-box{
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  .stock-num{
    margin-right: 200px;
  }
  .goods-item{
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline
  }
  .stock-card{
    min-width: 600px;
    border: 1px solid #f2f2f2;
    padding: 10px 20px;
    border-radius: 3px;
    margin-right: 50px;
    margin-bottom: 30px;
    height: auto;
    .goods-text{
      display: inline-block;
    }
    .goods-status{
      display: inline-block;
      min-width: 150px;
    }
    .goods-input{
      display: flex;
      flex-direction: column;

    }
  }
}
.tips{
  font-size: 12px;
  color: #7F7F7F;
}
.select-goods-dialog{
  .catalogo-tag{
    background-color: #5c5c5c;
    color: #ffffff;
    width: auto;
    padding: 1px 2px;
    font-size: 10px;
    font-weight: bold;
    position: absolute;
    top: 0;
    left: 0;
  }
}
.dialog-goods-stock{
  display: flex;
  .dialog-goods-stock-num{
    display: flex;
    flex-direction: column;
  }
}
</style>
